<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/echarts.min.js"></script>
		<style> html, body, #app { height: 100%; } </style>
	</head>
	<body>
		<div id="app" style="display: flex; flex-direction: column; width: 90%; margin:auto; height: calc(100% - 50px)">
				<h4 style="flex: none;display: flex; align-items: center; justify-content: space-between">
					年度月份销量曲线图
					<select style="width: 100px">
						<option>2012 年</option>
						<option>2013 年</option>
						<option>2014 年</option>
						<option>2015 年</option>
					</select>
				</h4>
				<div id="container" style="flex:auto"></div>
		</div>
		<script type="text/javascript">
			var dom = document.getElementById('container');
			var myChart = echarts.init(dom, null, {
				renderer: 'canvas',
				useDirtyRect: false
			});
			var option = {
				xAxis: {
					type: 'category',
					data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
				},
				yAxis: {
					type: 'value'
				},
				series: [{
					data: [150, 230, 224, 218, 135, 147, 260, 224, 218, 135, 147, 234],
					type: 'line'
				}]
			};
			if (option && typeof option === 'object') {
				myChart.setOption(option);
			}
			window.addEventListener('resize', myChart.resize);
		</script>
	</body>
</html>

<style>
	html,
	body,
	#app {
		height: 100%;
		padding: 0px;
		margin: 0px;
		overflow: hidden;
		color: #333;
	}

	#app {
		/* padding: 50px; */
		box-sizing: border-box;
	}
</style>
